<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=0.5,maximum-scale=1, minimum-scale=1, user-scalable=no"> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./public/bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="../public/jquery/1.12.0/jquery.min.js"></script>
    <script src="../public/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    
    <!-- ECharts单文件引入 -->
    <script src="../public/echarts-2.2.7/build/dist/echarts.js"></script>  
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>  
    <title>DHT11</title>
    <script type="text/javascript">
        function getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    + " " + date.getHours() + seperator2 + date.getMinutes()
                    + seperator2 + date.getSeconds()+ seperator2 + date.getMilliseconds();
            return currentdate;
        }
			
        console.log("start"); 
         /*
        var options = {  
            invocationContext: {  
                host : hostname,  
                port: port,  
                path: client.path,  
                clientId: clientId  
            },  
            timeout: timeout,  
            keepAliveInterval: keepAlive,  
            cleanSession: cleanSession,  
            useSSL: ssl,  
            userName: userName,  
            password: password,  
            onSuccess: onConnect,  
            onFailure: function(){  
                console.log(12112);  
            }  
        };
        */
        var mqtt_server_addr=""
        var mqtt_server_port=8083
        var mqtt_userid="test"
        var mqtt_username="test"
        var mqtt_userpasswd="test"
        var mqtt_topic="iotman/1512226921"
        
        var mqtt_keepAlive = 50;
       
        var mqtt_cleanSession = true;
        var mqtt_useSSL = false;
        
        var options={};
        if (mqtt_username) {
            options.userName = mqtt_username;
        }
        if (mqtt_userpasswd) {
            options.password = mqtt_userpasswd;
        }
        if (mqtt_keepAlive) {
            options.keepAliveInterval = Number(mqtt_keepAlive);
        }
        options.cleanSession = mqtt_cleanSession;
        options.useSSL= mqtt_useSSL;
        options.onSuccess=onConnect;
        options.onFailure=function(){
                console.log("connect error");  
        };
        
        client = new Paho.MQTT.Client(mqtt_server_addr, Number(mqtt_server_port), mqtt_userid);//建立客户端实例  
        client.connect(options);//连接服务器并注册连接成功处理事件
        console.log("connect"); 
        function onConnect() {
            console.log("onConnected");  
            client.subscribe(mqtt_topic);//订阅主题  
        }  
        client.onConnectionLost = onConnectionLost;//注册连接断开处理事件  
        client.onMessageArrived = onMessageArrived;//注册消息接收处理事件  
        function onConnectionLost(responseObject) {  
            if (responseObject.errorCode !== 0) {  
                console.log("onConnectionLost:"+responseObject.errorMessage);  
                console.log("连接已断开");  
             }  
        }  
        function onMessageArrived(message) {  
          //console.log("收到消息:"+message.payloadString);
          var revstr=message.payloadString;
            
            
          var revjsonobj = JSON.parse(revstr); //由JSON字符串转换为JSON对象
            draw(revjsonobj.p);
          //console.log("p:"+revjsonobj.p);
          showNowTime();
        }
        /*
        showT=function (t){
            toption.series[0].data[0].value = (t).toFixed(2) - 0;
            tmyChart.setOption(toption,true); 
        }
        showH=function (h){
            hoption.series[0].data[0].value = (h).toFixed(2) - 0;
            hmyChart.setOption(hoption,true); 
        }
        */
        var nowtimems,lasttimems;
        showNowTime=function(){
            var date = new Date();
            nowtimems=date.getTime();
            
            document.getElementById('NowTime').innerHTML="<h1>刷新时间：<font color=\"red\">"+getNowFormatDate()+"</font>&nbsp;</br><font color=\"blue\">和上一次刷新的间隔："+(nowtimems-lasttimems)+"</font>MS</br>设备里设定的间隔:70ms</br><a href=\"https://www.iotman.club/\"><h2>进入官网</h2></a></br>";
            lasttimems=nowtimems;
        }
        //发送消息  
        //message = new Paho.MQTT.Message("hello");  
        //message.destinationName = "/topic";  
       //client.send(message); 
    </script>
  </head>
  <body>
    <div id="NowTime" align="center"></div>
        <div class="container">
            <!--
            --仪表gauge-----------------------------------------------------------------------------
            -->
            <div class="row clearfix">
                  <!--温度监控 开始-->
                        <div class="col-xs-12 col-sm-10 col-md-6 col-lg-6">
                            <p><h4>在线设备温度</h4></p>
                            <img id="cv"  style="height:500px;width:600px;"></img><!--  -->
                            <script type="text/javascript">
                            function draw(beauty){
                            var myimg = document.getElementById("cv");  
                            myimg.src=beauty;
                            }
                            </script>
            </div>
          </div>
      </div>
  </body>
</html>
